<!-- login -->
<!--父组件必须绑定一个
loging-modal值和一个changeShow函数，
传入的都是Boolen值
示例:
 <login-box :loging-modal="login_box"    @changeShow="changeShow" />
-->
<template>
  <div>
    <a-modal
      :mask-closable="false"
      title="手机号登录"
      :visible="isShow"
      :confirm-loading="confirmLoading"
      style="text-align:center;"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <template slot="footer">没有账号？免费注册&nbsp;&gt;</template>
      <a-form-model ref="login_from" :model="login_from" :rules="login_rules">
        <a-form-model-item ref="phone" prop="phone">
          <a-input
            v-model="login_from.phone"
            style="width:50%;text-align:left;"
            placeholder="请输入手机号码"
          />
        </a-form-model-item>
        <a-form-model-item ref="password" prop="password">
          <a-input
            v-model="login_from.password"
            style="width: 50%"
            placeholder="请输入密码"
            type="password"
            @keyup.enter.native="userLogin"
          />
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            type="primary"
            block
            style="width: 50%;color:#fff;margin-top:10px;"
            :loading="confirmLoading"
            @click="userLogin"
          >
            登 录
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    logingModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const phoneCheck = (rule, value, callbackFn) => {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value) || value.length !== 11) {
        callbackFn('请输入正确的手机号码')
        return
      }
      callbackFn()
    }
    return {
      confirmLoading: false,
      isShow: this.logingModal,
      login_from: {
        phone: '',
        password: ''
      },
      login_rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator: phoneCheck,
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 12,
            message: '密码长度不正确',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    logingModal(val) {
      this.isShow = val
    },
    isShow(val) {
      this.$emit('changeShow', val)
    }
  },
  methods: {
    userLogin() {
      this.confirmLoading = true
      this.$refs.login_from.validate((v) => {
        if (v) {
          this.$store
            .dispatch('login', this.login_from)
            .then(() => {
              this.$message.success({
                content: '登录成功',
                duration: 2
              })
              this.confirmLoading = false
              this.isShow = false
            })
            .catch(() => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
          return false
        }
      })
    },
    handleCancel(e) {
      this.isShow = false
    },
    handleOk(e) {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.ant-modal-content {
  .ant-modal-header {
    background: #2d2d2d !important;
    color: #fff !important;
    text-align: left !important;
    .ant-modal-title {
      color: #fff !important;
    }
  }
}
/deep/.ant-modal-close {
  color: #fff !important;
}
</style>
